import React from 'react'
import { add,sub,asyncAdd } from '../app/slice/countSlice'
import store from '../app/store'
import {add as zanAdd,sub as zanSub} from '../app/slice/zanSlice'
import { useDispatch, useSelector } from 'react-redux'

export default function ReduxCom() {
  let count=useSelector(state=>state.count)
  let zan=useSelector(state=>state.zan.value)
  let dispatch=useDispatch()
  return (
    <div>
      <h2>计数器：{count}</h2>
      <button onClick={()=>{
        dispatch(add(10))
      }}>新增</button>
      <button onClick={()=>{
        dispatch(sub(10))
      }}>减少</button>
      <button onClick={()=>{
        dispatch(asyncAdd(10))
      }}>延时增加</button>
      <hr />
      <h2>{zan}</h2>
      <button onClick={()=>{
        dispatch(zanAdd(1))
      }}>点赞👍</button>
      <button onClick={()=>{
        store.dispatch(zanSub(1))
      }}>点踩👎</button>
    </div>
  )
}

